<template>
	<view>
		<view class="content">
			<view class="row">
				<view class="nominal">
					{{i18n.recipientName}}
				</view>
				<view class="input">
					<input :placeholder="i18n.enterRecipientName" type="text" v-model="name" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					{{i18n.phoneNumber}}
				</view>
				<view class="input">
					<!-- <input :placeholder="i18n.enterPhoneNumber" type="text" v-model="tel" /> -->
					<input type="text" v-model="tel" />
				</view>
			</view>
			<view class="row">
				<view class="nominal">
					{{i18n.location}}
				</view>
				<view class="input" @tap="chooseCity">
					{{i18n.selectAddress}}
				</view>

			</view>
			<view class="row">
				<view class="nominal">
					{{i18n.detailedAddress}}
				</view>
				<view class="input">
					<textarea v-model="detailed" auto-height="true">{{region}}</textarea>
				</view>
			</view>
			<view class="row list">
				<view class="nominal">
					{{i18n.setDefaultAddress}}
				</view>
				<view class="input switch">
					<switch color="#2ed034" :checked="isDefault" @change="isDefaultChange" />
				</view>
			</view>
			<view class="row list deletBtn" v-if="editType=='edit'" @tap="del">
				<view class="del">
					{{i18n.deleteAddress}}
				</view>
			</view>
		</view>
		<view class="save" @tap="save">
			<view class="btn">
				{{i18n.saveAddress}}
			</view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel"
		 @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		computed: {
			i18n() {
				// 倒入你需要的对象
				return this.$t('edit')
			}
		},
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				editType: 'edit',
				id: '',
				name: '',
				tel: '',
				detailed: '',
				isDefault: false,
				cityPickerValue: [0, 0, 1],
				themeColor: '#007AFF',
				region: '',
				token: '',
				userId: '',
			};
		},
		methods: {
			addAddress() {
				if (this.isDefault == true) {
					var status = "1";
				} else {
					var status = "0";
				}
				var date = this.getDate();
				uni.request({
					url: 'http://localhost:52019/v1/template001/consignee/creat', //添加收货地址
					data: {
						address: this.detailed,
						addressInfoDetail: this.region,
						consigneeName: this.name,
						createDateTimeStr: date,
						isDefault: status,
						isDelete: "0",
						mobilePhone: this.tel,
						phone: this.tel,
						ecCustomerId: this.userId
					},
					method: 'POST',
					dataType: 'json',
					header: {
						'token': this.token,
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						alert(res.data.data.message);
						uni.navigateTo({
							url: "../address"
						})
					}
				});
			},
			updateAddress() {
				console.log(this.detailed)
				console.log(this.id)
				console.log(this.token)
				uni.request({
					url: 'http://localhost:52019/v1/template001/consignee/update', //修改收货地址
					data: {
						address: this.detailed,
						id: this.id,
					},
					method: 'POST',
					dataType: 'json',
					header: {
						'token': this.token,
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						alert(res.data.data.message);
						uni.navigateTo({
							url: "../address"
						})
					}
				});
			},
			getLanguage() {
				var that = this;
				console.log(that.$i18n.locale)
				if (that.$i18n.locale === 'zh-CN') {
					uni.setNavigationBarTitle({
						title: '编辑收件人地址'
					});
				} else if (that.$i18n.locale === 'en-US') {
					uni.setNavigationBarTitle({
						title: 'Edit recipient address'
					});
				}
			},
			onCancel(e) {
				console.log(e)
			},
			chooseCity() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.region = e;
				this.detailed = e.label;
				this.cityPickerValue = e.value;
			},
			isDefaultChange(e) {
				this.isDefault = e.detail.value;
			},
			del() {
				uni.showModal({
					title: '删除提示',
					content: '你将删除这个收货地址',
					success: (res) => {
						if (res.confirm) {
							// uni.setStorage({
							// 	key: 'delAddress',
							// 	data: {
							// 		id: this.id
							// 	},
							// 	success() {
							// 		uni.navigateBack();
							// 	}
							// })
							console.log(this.id)
							uni.request({
								url: 'http://localhost:52019/v1/template001/consignee/delete', //添加收货地址
								data: {
									id: this.id
								},
								method: 'GET',
								dataType: 'json',
								header: {
									'token': this.token,
									'content-type': 'application/json' //自定义请求头信息
								},
								success: (res) => {
									console.log(res);
									alert(res.data.data.message);
									uni.navigateTo({
										url: "../address"
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			getDate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hours = date.getHours();
				var minutes = date.getMinutes();
				var seconds = date.getSeconds();
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (hours >= 0 && hours <= 9) {
					hours = "0" + hours;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}
				if (seconds >= 0 && seconds <= 9) {
					seconds = "0" + seconds;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate + " " + hours + seperator2 + minutes +
					seperator2 + seconds;
				return currentdate;
			},
			save() {
				// let data = {
				// 	"name": this.name,
				// 	"tel": this.tel,
				// 	"address": {
				// 		"region": this.region,
				// 		"detailed": this.detailed
				// 	},
				// 	"isDefault": this.isDefault
				// }

				// if (!data.name) {
				// 	uni.showToast({
				// 		title: '请输入收件人姓名',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// if (!data.tel) {
				// 	uni.showToast({
				// 		title: '请输入收件人电话号码',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// if (!data.address.detailed) {
				// 	uni.showToast({
				// 		title: '请输入收件人详细地址',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// if (data.address.region.value.length == 0) {
				// 	uni.showToast({
				// 		title: '请选择收件地址',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				// uni.showLoading({
				// 	title: '正在提交'
				// })
				//实际应用中请提交ajax,模板定时器模拟提交效果
				// setTimeout(() => {
				// 	uni.setStorage({
				// 		key: 'saveAddress',
				// 		data: data,
				// 		success() {
				// 			uni.hideLoading();
				// 			uni.navigateBack();
				// 		}
				// 	})
				// }, 300)
				if (this.editType == 'edit') {
					this.updateAddress();
				} else if (this.editType == 'add') {
					this.addAddress();
				}

			}
		},
		onLoad(e) {
			//获取传递过来的参数
			this.editType = e.type;
			if (e.type == 'edit') {
				uni.getStorage({
					key: 'address',
					success: (e) => {
						console.log(e)
						this.id = e.data.id;
						this.name = e.data.consigneeName;
						this.tel = e.data.phone;
						this.detailed = e.data.address;
						if (e.data.isDefault == '1') {
							this.isDefault = true;
						} else {
							this.isDefault = false;
						}
						// this.cityPickerValue = e.data.address.region.value;
					}
				})
			}
			const token = uni.getStorageSync('token');
			if (token) {
				this.token = token;
				console.log(token);
			}
			const userId = uni.getStorageSync('userId');
			if (userId) {
				this.userId = userId;
				console.log(userId);
			}
			this.getLanguage();

		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.save {
		view {
			display: flex;
		}

		position: fixed;
		bottom: 30upx;
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			width: 90%;
			height: 80upx;
			border: 1upx solid #8b6945;
			border-radius: 10upx;
			text-align: center;
			color: #8b6945;
			justify-content: center;
			align-items: center;

			.icon {
				height: 80upx;
				color: #fff;
				font-size: 30upx;
				justify-content: center;
				align-items: center;
			}

			font-size: 30upx;
		}
	}

	.content {
		display: flex;
		flex-wrap: wrap;

		view {
			display: flex;
		}

		.row {
			width: 94%;
			padding: 0 3%;
			border-top: solid 1upx #eee;
			background-color: #fff;
			align-items: center;

			&.list {
				margin-top: 20upx;
			}

			&.deletBtn {
				width: 100%;
				padding: 0;
			}

			.nominal {
				width: 30%;
				height: 100upx;
				font-weight: 200;
				font-size: 30upx;
				align-items: center;
			}

			.input {
				width: 70%;
				padding: 20upx 0;
				align-items: center;
				font-size: 30upx;

				&.switch {
					justify-content: flex-end;
				}

				.textarea {
					margin: 20upx 0;
					min-height: 120upx;
				}
			}

			.del {
				width: 100%;
				height: 100upx;
				justify-content: center;
				align-items: center;
				font-size: 36upx;
				color: #f13033;
				background-color: rgba(255, 0, 0, 0.05);
				background-color: #fff;
				border-bottom: solid 1upx #eee;
			}
		}
	}
</style>
